<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 计算机二级模拟考试系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #2c3e50;
            --secondary-color: #3498db;
            --background-color: #f8f9fa;
            --text-color: #333;
            --border-color: #ddd;
        }
    
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--background-color);
            margin: 0;
            padding: 20px;
            color: var(--text-color);
            line-height: 1.6;
        }
    
        .container {
            max-width: 1000px;
            margin: 20px auto;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
    
        h1 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: 600;
        }
    
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 2px solid var(--border-color);
        }
    
        .tab-button {
            flex: 1;
            padding: 15px;
            border: none;
            background: none;
            cursor: pointer;
            font-size: 16px;
            transition: all 0.3s;
            color: #7f8c8d;
            font-weight: 500;
        }
    
        .tab-button.active {
            color: var(--secondary-color);
            border-bottom: 3px solid var(--secondary-color);
        }
    
        .question-container {
            position: relative;
            min-height: 400px;
        }
    
        .tab-pane {
            display: none;
            animation: fadeIn 0.3s;
        }
    
        .tab-pane.active {
            display: block;
        }
    
        .question-card {
            background: #fff;
            border-radius: 8px;
            padding: 25px;
            margin: 15px 0;
            border-left: 4px solid var(--secondary-color);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
    
        .question-header {
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
    
        .question-content {
            margin: 20px 0;
        }
    
        .option {
            display: block;
            margin: 15px 0;
            padding: 12px;
            background: #f9f9f9;
            border-radius: 6px;
            border: 1px solid var(--border-color);
            transition: all 0.2s;
            cursor: pointer;
        }
    
        .option:hover {
            background: #e3f2fd;
            border-color: var(--secondary-color);
        }
    
        .option input[type="radio"] {
            margin-right: 12px;
        }
    
        .selected {
            background: #e3f2fd;
            border-left: 4px solid var(--secondary-color);
        }
    
        .nav-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
        }
    
        .question-section {
            margin: 20px 0;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 6px;
            border: 1px solid var(--border-color);
        }
    
        .question-section h3 {
            color: var(--primary-color);
            margin-top: 0;
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
        }
    
        .question-section p {
            margin: 10px 0;
            font-size: 15px;
            color: #555;
        }
    
        .question-section ol,
        .question-section ul {
            margin: 10px 0;
            padding-left: 20px;
        }
    
        .question-section li {
            margin: 8px 0;
            font-size: 14px;
            color: #555;
        }
    
        textarea {
            width: 100%;
            height: 150px;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 5px;
            resize: vertical;
            font-family: inherit;
            font-size: 14px;
            color: var(--text-color);
            margin-top: 15px;
        }
    
        .btn {
            padding: 12px 25px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            background: var(--secondary-color);
            color: white;
            font-size: 14px;
            font-weight: 500;
        }
    
        .btn:hover {
            opacity: 0.9;
        }
    
        .btn:disabled {
            background: #bdc3c7;
            cursor: not-allowed;
        }
    
        .download-section {
            text-align: center;
            margin-top: 30px;
        }
    
        .download-btn {
            background: #27ae60;
            padding: 15px 40px;
            font-size: 16px;
        }
    
        .download-btn i {
            margin-right: 8px;
        }
    
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1><i class="fas fa-laptop-code"></i>计算机二级ms office真题卷2</h1>
        
        <div class="tabs">
            <button class="tab-button active" data-tab="choice">选择题（20题）</button>
            <button class="tab-button" data-tab="word">字处理题</button>
            <button class="tab-button" data-tab="table">表格处理题</button>
            <button class="tab-button" data-tab="presentation">演示文稿题</button>
        </div>

        <div class="question-container">
            <!-- 选择题 -->
            <div id="choice" class="tab-pane active">
                <div class="question-card">
                    <div class="question-header">
                        <h2>选择题 <span id="currentQuestion">1/20</span></h2>
                    </div>
                    <div class="question-content">
                        <!-- 题目内容动态加载 -->
                    </div>
                    <div class="nav-buttons">
                        <button class="btn" id="prevBtn"><i class="fas fa-chevron-left"></i> 上一题</button>
                        <button class="btn" id="nextBtn">下一题 <i class="fas fa-chevron-right"></i></button>
                    </div>
                </div>
            </div>

            <!-- 字处理题 -->
            <div id="word" class="tab-pane">
                <div class="question-card">
                    <div class="question-section">
                        <h3><i class="fas fa-tasks"></i> 题目要求</h3>
                        <p>sffffffffffffffffffff请在[答题]菜单下选择进入考生文件夹命令，并按照题目要求完成下面的操作。</p>
                        <p>注意：以下的文件必须都保存在考生文件夹下。</p>
                        <p>在考生文件夹下打开Word.docx。</p>
                        <ol>
                            <li>调整纸张大小为高20厘米，宽14厘米，页边距上、下、左、右均为1.5厘米。</li>
                            <li>为文档添加"镶边"封面，将文档开头的"黑客技术"文本移入封面的"标题"控件中，删除其他控件。</li>
                            <li>在不改变原有字体、字号、颜色等字体格式的前提下，将编号为"一、"到"七、"的7个标题段落的样式设置为"标题1"，将其段前和段后间距设置为0.5行，将手动编号修改为自动编号，且顿号后面不要再有其他分隔符。</li>
                            <li>在不改变原有字体、字号、颜色等字体格式的前提下，将编号为"(一)"到"(五)"的5个标题段落的样式设置为"标题2"，将其段前和段后间距设置为0.5行，将手动编号修改为自动编号，且编号和后面文字使用空格分隔。</li>
                            <li>在不修改"正文"样式的前提下，修改文档中正文段落为首行缩进2字符，段前和段后间距为0.5行。</li>
                            <li>在封面后面为文档添加目录，包含"标题1"和"标题2"内容以及文档开头的标题文本"引言"和文档末尾的文本"索引"，设置"引言"和"索引"两处文本的大纲级别，但不能修改其样式，使其在目录中和"标题1"同级。</li>
                            <li>使目录位于独立的页面内，在文档页脚中添加样式为"马赛克2"的页码，封面和目录页没有页码，正文部分页码从1开始。</li>
                            <li>修改文档的脚注编号为连续编号。</li>
                            <li>将考生文件夹下"索引条目.docx"文件中的词条作为索引项项目，在文档中进行标记，并在文档末尾标题"索引"后插入索引。</li>
                            <li>删除文档中全部的"Internet"索引标记，并更新索引和目录。</li>
                            <li>保存文档Word.docx，然后将其另存为"Word繁体.docx"，将文档全部内容转换为中文繁体字，但不要转换常用词汇，并且不使用港澳台异体字。</li>
                        </ol>
                    </div>
                    <div class="download-section">
                        <button class="btn download-btn" onclick="downloadFile('word')">
                            <i class="fas fa-download"></i> 下载字处理题资料
                        </button>
                    </div>
                </div>
            </div>

            <!-- 表格处理题 -->
            <div id="table" class="tab-pane">
                <div class="question-card">
                    <div class="question-section">
                        <h3><i class="fas fa-table"></i> 题目要求</h3>
                        <p>请在[答题]菜单下选择进入考生文件夹命令，并按照题目要求完成下面的操作。</p>
                        <p>注意：以下的文件必须都保存在考生文件夹下。</p>
                        <p>在考生文件夹下打开Excel.xlsx。</p>
                        <ol>
                            <li>调整工作表大小为A4纸张，页边距上、下、左、右均为1.5厘米。</li>
                            <li>为工作表添加标题行，标题为"员工信息表"。</li>
                            <li>设置表格边框样式为细实线，表头背景色为浅蓝色。</li>
                            <li>计算员工的平均年龄，并将结果显示在表格末尾。</li>
                            <li>保存文档Excel.xlsx，然后将其另存为"Excel备份.xlsx"。</li>
                        </ol>
                    </div>
                    <div class="download-section">
                        <button class="btn download-btn" onclick="downloadFile('table')">
                            <i class="fas fa-download"></i> 下载表格处理题资料
                        </button>
                    </div>
                </div>
            </div>

            <!-- 演示文稿题 -->
            <div id="presentation" class="tab-pane">
                <div class="question-card">
                    <div class="question-section">
                        <h3><i class="fas fa-file-powerpoint"></i> 题目要求</h3>
                        <p>请在[答题]菜单下选择进入考生文件夹命令，并按照题目要求完成下面的操作。</p>
                        <p>注意：以下的文件必须都保存在考生文件夹下。</p>
                        <p>在考生文件夹下打开PowerPoint.pptx。</p>
                        <ol>
                            <li>创建5页主题幻灯片，主题为"校园科技文化节"。</li>
                            <li>在首页添加公司LOGO，并设置LOGO大小为宽5厘米，高3厘米。</li>
                            <li>设置页面切换动画为"淡入淡出"，持续时间为1秒。</li>
                            <li>保存文档PowerPoint.pptx，然后将其另存为"PowerPoint备份.pptx"。</li>
                        </ol>
                    </div>
                    <div class="download-section">
                        <button class="btn download-btn" onclick="downloadFile('presentation')">
                            <i class="fas fa-download"></i> 下载演示文稿题资料
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 选择题数据（包含题目和选项）
        const questions = [
            {
                id: 1,
                title: "1. 液晶显示器(LCD)的主要技术指标不包括()。",
                options: [
                    "A. 显示分辨率",
                    "B. 显示速度",
                    "C. 亮度和对比度",
                    "D. 存储容量"
                ]
            },
            {
                id: 2,
                title: "2. 在结构化程序设计中,其基本结构不包括()。",
                options: [
                    "A. 顺序结构",
                    "B. GOTO跳转",
                    "C. 选择(分支)结构",
                    "D. 循环(重复)结构"
                ]
            },
            // 其他题目可以继续添加
            ...Array.from({length: 18}, (_, i) => ({
                id: i + 3,
                title: `第 ${i + 3} 题：${['计算机组成原理', '操作系统', '网络基础', '办公软件'][i % 4]}`,
                options: Array.from({length: 4}, (_, j) => 
                    `${String.fromCharCode(65 + j)}. 这是第 ${i + 3} 题的第 ${j + 1} 个选项`
                )
            }))
        ];
    
        // 存储用户选择的答案
        const userAnswers = new Array(questions.length).fill(null);
    
        let currentQuestionIndex = 0;
        const questionContent = document.querySelector('.question-content');
    
        // 初始化显示第一题
        function showCurrentQuestion() {
            const currentAnswer = userAnswers[currentQuestionIndex];
            questionContent.innerHTML = `
                <p style="font-size:1.1em; margin-bottom:20px">${questions[currentQuestionIndex].title}</p>
                ${questions[currentQuestionIndex].options.map((opt, optIndex) => `
                    <label class="option ${currentAnswer === optIndex ? 'selected' : ''}">
                        <input type="radio" name="q${currentQuestionIndex + 1}" 
                               value="${optIndex}" 
                               ${currentAnswer === optIndex ? 'checked' : ''}>
                        ${opt}
                    </label>
                `).join('')}
            `;
            updateQuestionCounter();
            updateNavButtons();
            attachOptionListeners();
        }
    
        // 更新题目计数器
        function updateQuestionCounter() {
            document.getElementById('currentQuestion').textContent = 
                `${currentQuestionIndex + 1}/${questions.length}`;
        }
    
        // 更新导航按钮状态
        function updateNavButtons() {
            document.getElementById('prevBtn').disabled = currentQuestionIndex === 0;
            document.getElementById('nextBtn').disabled = currentQuestionIndex === questions.length - 1;
        }
    
        // 添加选项点击监听
        function attachOptionListeners() {
            document.querySelectorAll('.option input[type="radio"]').forEach(radio => {
                radio.addEventListener('change', function() {
                    userAnswers[currentQuestionIndex] = parseInt(this.value);
                    // 更新选项样式
                    document.querySelectorAll('.option').forEach(opt => opt.classList.remove('selected'));
                    this.parentElement.classList.add('selected');
                });
            });
        }
    
        // 题目导航
        document.getElementById('prevBtn').addEventListener('click', () => {
            if (currentQuestionIndex > 0) {
                currentQuestionIndex--;
                showCurrentQuestion();
            }
        });
    
        document.getElementById('nextBtn').addEventListener('click', () => {
            if (currentQuestionIndex < questions.length - 1) {
                currentQuestionIndex++;
                showCurrentQuestion();
            }
        });
    
        // 下载资料功能
        function downloadFile(type) {
            let filename = '';
            switch (type) {
                case 'word':
                    filename = '字处理题资料.zip';
                    break;
                case 'table':
                    filename = '表格处理题资料.zip';
                    break;
                case 'presentation':
                    filename = '演示文稿题资料.zip';
                    break;
            }
            alert(`下载功能为演示模式，实际文件名为：${filename}`);
            // 实际开发中可以通过以下方式实现下载：
            // const link = document.createElement('a');
            // link.href = `path/to/${filename}`;
            // link.download = filename;
            // link.click();
        }
    
        // 选项卡切换
        document.querySelectorAll('.tab-button').forEach(button => {
            button.addEventListener('click', function() {
                document.querySelectorAll('.tab-button').forEach(b => b.classList.remove('active'));
                document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.remove('active'));
                this.classList.add('active');
                document.getElementById(this.dataset.tab).classList.add('active');
            });
        });
    
        // 初始化
        document.addEventListener('DOMContentLoaded', showCurrentQuestion);
    </script>
</body>
</html>